<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '学生档案',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import { StudentApi } from '@/apis'
import getAvatar from '@/utils/avatar'
import ClassCard from '@/components/ClassCard.vue'

const student = ref<StudentApi.StudentDetailResp>()

const getDetail = async (id: string) => {
  student.value = await StudentApi.getStudentDetail(id)
}

const getAge = (date) => {
  if (!date) {
    return 0
  }
  return new Date().getFullYear() - new Date(date).getFullYear() + 1
}

const onCopy = (text) => {
  try {
    uni.setClipboardData({
      data: text,
      success: (success) => {
        uni.showToast({ title: '复制手机号成功' })
      },
    })
  } catch (e) {
    console.error(e)
  }
}

onLoad((options) => {
  if (options.id) {
    getDetail(options.id)
  }
})
</script>

<template>
  <view v-if="student" class="px py">
    <view class="border-rd-[16rpx] bg-white p-[24rpx]">
      <view class="flex items-center gap-[24rpx]">
        <wd-img width="88rpx" radius="8rpx" height="88rpx" :src="getAvatar(student.avatar, student.gender)" />
        <view class="flex-1">
          <view class="flex items-center">
            <text class="text-34rpx">
              {{ student.name }}
            </text>
            <wd-icon v-if="student.gender === 1" name="gender-male" size="30rpx" color="#3c74df" />
            <wd-icon v-else-if="student.gender === 2" name="gender-female" size="30rpx" color="#FF0088" />
          </view>
          <view class="mt-[10rpx] flex items-center gap-[8rpx]">
            <view class="border-rd-[4rpx] bg-[#E8F3FF] px-[8rpx] py-4rpx font-size-[24rpx] color-[#2176E7]" @click="onCopy(student.parentPhone)">
              {{ student.parentPhone }}
            </view>
          </view>
        </view>
      </view>
      <view>
        <view class="mt-[10rpx] flex text-24rpx">
          <view class="flex-1">
            <text class="label  color-[#999]">
              年龄：
            </text>
            <text class="">
              {{ getAge(student.birthdate) }}岁
            </text>
          </view>
          <view class="flex-1">
            <text class="label  color-[#999]">
              入学年份：
            </text>
            <text class="">
              {{ student.admissionYear || '-' }}
            </text>
          </view>
        </view>
        <view class="mt-[10rpx] flex">
          <view class="flex-1">
            <text class="label font-size-[24rpx] color-[#999]">
              出生年月：
            </text>
            <text class="font-size-[24rpx]">
              {{ student.birthdate || '-' }}
            </text>
          </view>
          <view class="flex-1">
            <text class="label font-size-[24rpx] color-[#999]">
              就读学校：
            </text>
            <text class="font-size-[24rpx]">
              {{ student.fulltimeSchool || '-' }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="mt-4">
      <view class="font-size-[28rpx]">
        就读班级
      </view>
      <view v-for="(item, index) in student.enrollClassList" :key="index" class="mt-[24rpx] rounded-2 bg-white">
        <ClassCard :item="item" />
        <!-- <view class="flex items-center gap-[12rpx]">
          <view
            class="flex-col-center-center border-rd-[4rpx] bg-[#ee8432] px-[4rpx] py-[4rpx] font-size-[24rpx] color-white"
          >
            {{ useDictLabel('ClassCategoryEnum', item.classCategory) }}
          </view>
          <text class="flex-1 font-size-[30rpx]">
            {{ item.name }}
          </text>
        </view> -->
        <!-- <view class="mt-[10rpx] font-size-[24rpx] color-[#4E5969]">
          {{ item.arrangeTemplate.startDate }}~{{ item.arrangeTemplate.endDate }} ·
          {{ item.timeTemplate.startTime }}-{{ item.timeTemplate.endTime }}
        </view> -->
        <!-- <view class="mt-[10rpx] flex items-center justify-between">
          <text class="font-size-[24rpx] color-[#4E5969]">
            {{ item.campusName }}·{{ item.classroomName }}
          </text> -->
          <!-- <view class="bg-[#E8F3FF] border-rd-[4rpx] px-[8rpx] color-[#2176E7] font-size-[24rpx]">已续报</view> -->
        <!-- </view> -->
      </view>
    </view>
    <view class="mt-4">
      <view class="font-size-[28rpx]">
        选课权限
      </view>
      <view class="mt-[24rpx] border-rd-[16rpx] bg-white p-[24rpx]">
        <template v-for="(item, index) in student.permissionList" :key="index">
          <view v-if="index !== 0" class="my-[20rpx]">
            <view class="line" />
          </view>
          <view>
            <view class="font-size-[30rpx]">
              {{ useDictLabel('Subject', item.subject) }}
              {{ item.admissionYear }}年
              等级 {{ `<=${item.classLevel}` }}
            </view>
            <view class="mt-[8rpx] font-size-[24rpx] color-[#4E5969]">
              {{ item.remark }}
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
  <view v-else>
    <wd-status-tip image="content" tip="暂无内容" />
  </view>
</template>

<style lang="scss" scoped>
  .label {
    display: inline-block;
    width: 120rpx;
    text-align: justify;
    text-align-last: justify;
  }

  .line {
    height: 1px;
    background: #eee;
    transform: scaleY(0.5);
  }
</style>
